/**
 * Canvas图片生成工具
 * 用于将页面内容转换为图片，支持自定义水印
 */

/**
 * 生成分享图片
 * @param {Object} options - 配置选项
 * @param {string} options.title - 标题
 * @param {string} options.content - 内容
 * @param {string} options.logo - 企业Logo
 * @param {string} options.userName - 用户名
 * @param {string} options.date - 日期
 * @param {string} options.bgColor - 背景颜色
 * @returns {Promise<string>} - Base64格式的图片
 */
export function generateShareImage(options = {}) {
	return new Promise((resolve, reject) => {
		try {
			// 1. 合并配置，新增 backgroundImage 选项（背景图地址）
			const config = {
				title: '',
				content: '',
				logo: '/static/logo.png',
				userName: uni.getStorageSync('userName'),
				date: new Date().toLocaleDateString(),
				backgroundImage: '/static/homeNav/share1.png', // 背景图地址
				bgColor: '#ffffff', // 备用：若背景图加载失败，使用纯色背景
				...options
			};

			// 2. 创建Canvas和上下文
			const canvas = document.createElement('canvas');
			const ctx = canvas.getContext('2d');
			canvas.width = 750;
			canvas.height = 1334;

			// 添加绘制圆角矩形的函数
			function drawRoundedRect(ctx, x, y, width, height, radius) {
				ctx.beginPath();
				ctx.moveTo(x + radius, y);
				ctx.lineTo(x + width - radius, y);
				ctx.arcTo(x + width, y, x + width, y + radius, radius);
				ctx.lineTo(x + width, y + height - radius);
				ctx.arcTo(x + width, y + height, x + width - radius, y + height, radius);
				ctx.lineTo(x + radius, y + height);
				ctx.arcTo(x, y + height, x, y + height - radius, radius);
				ctx.lineTo(x, y + radius);
				ctx.arcTo(x, y, x + radius, y, radius);
				ctx.closePath();
			}

			// 3. 定义绘制主体内容的函数（支持多内容绘制）
			function drawMainContent() {
				// 绘制标题（原逻辑保留）
				ctx.font = 'bold 60px sans-serif';
				ctx.fillStyle = '#f5eeb5';
				ctx.textAlign = 'center';
				ctx.fillText(config.title, canvas.width / 2, 180);

				// 内容区域基础配置（统一边界，方便计算内部坐标）
				const contentX = 50; // 内容区左边界
				const contentY = 300; // 内容区上边界
				const contentWidth = canvas.width - 100; // 内容区总宽度
				const contentHeight = 500; // 内容区总高度
				const cornerRadius = 20; // 圆角半径

				// 绘制内容区域背景（带边框的圆角矩形）
				ctx.fillStyle = '#fde4ce';
				drawRoundedRect(ctx, contentX, contentY, contentWidth, contentHeight, cornerRadius);
				ctx.fill();
				ctx.strokeStyle = '#c70003';
				ctx.lineWidth = 2;
				drawRoundedRect(ctx, contentX, contentY, contentWidth, contentHeight, cornerRadius);
				ctx.stroke();

				// -------------------------- 绘制多个不同内容 --------------------------

				// 4. 第三块内容：数据卡片（示例：带图标的数据项）
				// 4.1 卡片背景
				let currentY = contentY;
				ctx.fillStyle = '#fff8e6';
				drawRoundedRect(ctx, contentX + 20, contentY + 20, contentWidth - 40, 460, 10);
				ctx.fill();
				// 1. 第一块内容：副标题
				currentY += 80; // 当前绘制的Y坐标（从内容区顶部往下30px开始）
				ctx.font = '36px bold sans-serif';
				ctx.fillStyle = '#c70003'; // 副标题颜色
				ctx.textAlign = 'center';
				ctx.fillText(config.title, canvas.width / 2, currentY);
				currentY += 40; // 下移50px，预留空间
				// 2. 分隔线（分隔副标题和正文）
				ctx.strokeStyle = '#c7000340'; // 半透色
				ctx.lineWidth = 1;
				ctx.beginPath();
				ctx.moveTo(contentX + 40, currentY); // 左起点
				ctx.lineTo(contentX + contentWidth - 40, currentY); // 右终点
				ctx.stroke();
				currentY += 30; // 下移30px

				if (options.content) {

					// 4.2 数据标题
					ctx.font = '28px bold sans-serif';
					ctx.fillStyle = '#333';
					ctx.textAlign = 'center';
					ctx.fillText('业绩完成情况', canvas.width / 2, currentY + 50);
					// 4.3 数据值
					ctx.font = '40px bold sans-serif';
					ctx.fillStyle = '#c70003';
					ctx.fillText(config.content, canvas.width / 2, currentY + 120);
				}
				// 3. 处理长文本内容（核心修改部分）
				if (config.rw_content) {
					// 文本配置
					const text = config.rw_content.trim();
					const maxTextWidth = contentWidth - 80; // 文本最大宽度（左右各40px内边距）
					const fontSize = 28; // 文本字号
					const lineHeight = 42; // 行高（字号的1.5倍，提升可读性）
					const textColor = '#333333'; // 文本颜色
					const startY = currentY + 10; // 文本起始Y坐标（顶部预留10px间距）
					const maxLineCount = Math.floor((contentHeight - (startY - contentY) - 40) /
					lineHeight); // 最大可显示行数（底部预留40px）

					// 调用换行函数处理长文本
					const wrappedLines = wrapText(ctx, text, maxTextWidth, fontSize);

					// 设置文本样式
					ctx.font = `${fontSize}px sans-serif`;
					ctx.fillStyle = textColor;
					ctx.textAlign = 'left'; // 长文本左对齐更易读

					// 逐行绘制文本
					wrappedLines.forEach((line, index) => {
						// 超出最大行数时显示省略号并终止
						if (index >= maxLineCount) {
							ctx.fillText('...', contentX + 40, startY + index * lineHeight);
							return;
						}
						// 绘制当前行
						ctx.fillText(line, contentX + 40, startY + index * lineHeight);
					});

					// 更新currentY到文本底部（方便后续扩展其他内容）
					currentY = startY + Math.min(wrappedLines.length, maxLineCount) * lineHeight + 20;
				}
				// -------------------------- 原有Logo和水印绘制 --------------------------
				if (config.logo) {
					const logoSizeW = 120;
					const logoSizeH = 120;
					const logoX = (canvas.width - logoSizeW) / 2;
					const logoY = 900; // 可根据内容区高度调整
					const logoImg = new Image();
					logoImg.crossOrigin = 'Anonymous';
					logoImg.onload = () => {
						ctx.drawImage(logoImg, logoX, logoY, logoSizeW, logoSizeH);
						drawWatermark(ctx, canvas, config);
						const base64Image = canvas.toDataURL('image/png', 0.9);
						resolve(base64Image);
					};
					logoImg.onerror = () => {
						drawWatermark(ctx, canvas, config);
						const base64Image = canvas.toDataURL('image/png', 0.9);
						resolve(base64Image);
					};
					logoImg.src = config.logo;
				} else {
					drawWatermark(ctx, canvas, config);
					const base64Image = canvas.toDataURL('image/png', 0.9);
					resolve(base64Image);
				}
			}
			// 4. 优先处理背景图（核心修改部分）
			if (config.backgroundImage) {
				// 加载背景图
				const bgImg = new Image();
				bgImg.crossOrigin = 'Anonymous'; // 允许跨域加载（避免Canvas污染）

				// 背景图加载成功：绘制背景图后，再绘制主体内容
				bgImg.onload = () => {
					// 绘制背景图（覆盖整个Canvas）
					// 参数：图片对象, 目标x, 目标y, 目标宽, 目标高
					ctx.drawImage(bgImg, 0, 0, canvas.width, canvas.height);
					// 背景图绘制完成后，再绘制其他内容
					drawMainContent();
				};

				// 背景图加载失败：降级使用纯色背景
				bgImg.onerror = () => {
					console.warn('背景图加载失败，使用默认背景色');
					// 绘制纯色背景（原逻辑）
					ctx.fillStyle = config.bgColor;
					ctx.fillRect(0, 0, canvas.width, canvas.height);
					// 继续绘制主体内容
					drawMainContent();
				};

				// 开始加载背景图
				bgImg.src = config.backgroundImage;
			} else {
				// 无背景图：使用纯色背景（原逻辑）
				ctx.fillStyle = config.bgColor;
				ctx.fillRect(0, 0, canvas.width, canvas.height);
				drawMainContent();
			}

		} catch (error) {
			console.error('生成分享图片失败:', error);
			reject(error);
		}
	});
}
/**
 * 绘制水印信息
 * @param {CanvasRenderingContext2D} ctx - Canvas上下文
 * @param {HTMLCanvasElement} canvas - Canvas元素
 * @param {Object} config - 配置选项
 */
function drawWatermark(ctx, canvas, config) {
	// 绘制用户名和日期
	ctx.font = '24px sans-serif';
	ctx.fillStyle = '#fff';
	ctx.textAlign = 'center';
	ctx.fillText(`分享人: ${config.userName}`, canvas.width / 2, 1060);
	ctx.fillText(`分享时间: ${config.date}`, canvas.width / 2, 1110);

	// 绘制版权信息
	ctx.font = '24px sans-serif';
	ctx.fillStyle = '#fff';
	ctx.textAlign = 'center';
	ctx.fillText('金智咨询CMS', canvas.width / 2, 1220);
}

/**
 * 文本换行处理
 * @param {CanvasRenderingContext2D} ctx - Canvas上下文
 * @param {string} text - 需要换行的文本
 * @param {number} maxWidth - 最大宽度
 * @param {number} fontSize - 字体大小
 * @param {number} lineHeight - 行高
 * @returns {Array<string>} - 换行后的文本数组
 */
function wrapText(ctx, text, maxWidth, fontSize, lineHeight) {
	const lines = [];
	let currentLine = '';
	const words = text.split(' ');

	ctx.font = `${fontSize}px sans-serif`;

	for (const word of words) {
		const testLine = currentLine + (currentLine ? ' ' : '') + word;
		const metrics = ctx.measureText(testLine);
		const testWidth = metrics.width;

		if (testWidth > maxWidth && currentLine) {
			lines.push(currentLine);
			currentLine = word;
		} else {
			currentLine = testLine;
		}
	}

	if (currentLine) {
		lines.push(currentLine);
	}

	return lines;
}

/**
 * 将HTML元素转换为图片
 * @param {string} elementId - 元素ID
 * @returns {Promise<string>} - Base64格式的图片
 */
export function htmlToImage(elementId) {
	return new Promise((resolve, reject) => {
		try {
			const element = document.getElementById(elementId);
			if (!element) {
				reject(new Error(`找不到ID为${elementId}的元素`));
				return;
			}

			// 创建Canvas元素
			const canvas = document.createElement('canvas');
			const ctx = canvas.getContext('2d');

			// 获取元素尺寸
			const rect = element.getBoundingClientRect();
			canvas.width = rect.width;
			canvas.height = rect.height;

			// 使用html2canvas库（需要额外引入）
			// 这里使用简化版实现，实际项目中建议使用成熟的库
			if (window.html2canvas) {
				window.html2canvas(element).then(canvas => {
					const base64Image = canvas.toDataURL('image/png');
					resolve(base64Image);
				}).catch(error => {
					reject(error);
				});
			} else {
				// 降级处理：绘制元素文本内容
				ctx.fillStyle = '#ffffff';
				ctx.fillRect(0, 0, canvas.width, canvas.height);
				ctx.font = '20px sans-serif';
				ctx.fillStyle = '#333333';
				ctx.textAlign = 'center';
				ctx.fillText('需要引入html2canvas库以支持HTML转图片', canvas.width / 2, canvas.height / 2);

				const base64Image = canvas.toDataURL('image/png');
				resolve(base64Image);
			}
		} catch (error) {
			console.error('HTML转图片失败:', error);
			reject(error);
		}
	});
}